<template>
    <div class="menu">
        <div class="seek-img">
            <img src="../img/seek_pet3.png" alt="">
        </div>
        <div class="publish-options">
            <div>转让</div>
            <div>情缘</div> 
            <div @click="toSeekPublish">寻宠</div>
        </div>
        <div class="publish-dynamic">
            <span>发布动态记录美好生活</span>
            <van-icon class="arrow" name="arrow" />
        </div>
        <div class="code">
            <div><p>扫码</p></div>
            <div @click="add"><p>鼻纹采集</p></div>
            <div><p>鼻纹识别</p></div>
        </div>
        <div @click="close"><van-icon name="close" size="40"/></div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const toSeekPublish = ()=>{
    router.push({name:'seekPublish'})
}
const close = ()=>{
      router.push({
    name: 'lineTogic'
  })
}
const add=()=>{
     router.push({
    name: 'addPet'
  })
}
</script>

<style lang='less' scoped>
.menu{
    background-color: #F7F8FC;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .seek-img{
        width: 100vw;
        img{
            width: 100%;
        }
    }
    .publish-options{
        width: 90vw;
        height: 10vh;
        
        margin: 5vw;
        display: flex;
        justify-content: space-between;
        text-align: center;

        div{
            font-family: SimHei;
            width: 20%;
            border-radius: 20px;
            background-color: #F8F1D4;
            padding: 18px;
            
        }
        div:nth-child(1){
            background-image: url(../img/trans.png);
            background-size: 50% 45%;
            background-repeat: no-repeat;
            background-position: bottom;
        }
        div:nth-child(2){
            background-image: url(../img/heart.png);
            background-size: 50% 45%;
            background-repeat: no-repeat;
            background-position: bottom;
        }
        div:nth-child(3){
            background-image: url(../img/local.png);
            background-size: 50% 45%;
            background-repeat: no-repeat;
            background-position: bottom;
        }
    }
    .publish-dynamic{
        width: 90vw;
        height: 8vh;
        background-color: #D0F0EB;
        border-radius: 20px;
        background-image: url("../img/cycle.png");
        background-position: 10px center;
        background-size: 50px;
        background-repeat: no-repeat;
        text-indent: 4rem;
        position: relative;
        span{
            line-height: 8vh;
        }
        .arrow{
            position: absolute;
            right: 15px;
            bottom: 22px;
        }
    
    }
    .code{
        width: 90vw;
        height: 10vh;
        
        margin: 10vh 5vw;
        display: flex;
        justify-content: space-around;
        text-align: bottom;

        div{
            font-family: SimHei;
            width: 20%;
            border-radius: 20px;
            background-color: #F7F8FC;
            position: relative;
            p{
                width: 100%;
                text-align: center;
                position: absolute;
                top: 40px;
                bottom: 0;
            }
            
        }
        div:nth-child(1){
            background-image: url(../img/code1.png);
            background-size: 50px;
            background-repeat: no-repeat;
            background-position: top;
        }
        div:nth-child(2){
            background-image: url(../img/code2.png);
            background-size: 55px;
            background-repeat: no-repeat;
            background-position: top;
        }
        div:nth-child(3){
            background-image: url(../img/code3.png);
            background-size: 50px;
            background-repeat: no-repeat;
            background-position: top;
        }
    }
    
}
    
</style>